<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-10-24 15:06:30
 * @LastEditTime: 2022-12-08 10:36:19
-->
<template>
  <!--其他查询-->
  <div class="other-content flex flex-vertical-center">
    <div class="flex">
      <ul class="flex flex-horizontal-between flex-vertical-center date-list">
        <li
          v-for="(item, index) in dateList"
          :key="index"
          :class="[{ selected: index == checkIndex }]"
          @click="checkFun(item.key)">
          {{ item.title }}
        </li>
      </ul>
      <div class="flex flex-vertical-center" v-if="isExtensionFlag">
        <span class="check-time">自定义：</span>
        <Cascader
          :data="cusData"
          v-model="cusVal"
          change-on-select
          :render-format="format"
          style="width: 200px"
          placeholder="请选择周期"
          @on-change="changeCascader"
          @on-visible-change="visibleChange"
          :clearable="false" />
      </div>
      <div class="flex flex-vertical-center" v-else>
        <span class="check-time">自定义：</span>
        <DatePicker
          type="daterange"
          :clearable="false"
          @on-change="dateChoose"
          ref="oselect"
          placeholder="请选择时间"
          v-model="dateTime"></DatePicker>
      </div>
    </div>
    <div class="date-limit">
      <span>
        <Icon type="ios-help-circle-outline" size="18" color="#D9001B" />
        取值条件：
      </span>
      <span>{{ showDateText }}</span>
      <Button type="text" @click="editDateFun" style="color: #2d8cf0">修改</Button>
    </div>
    <!--设置日期取值-->
    <dt-modal-edit ref="dateEdit" title="设置取值条件" @ok="onOk">
      <p class="tips">
        <Icon type="md-alert" size="22" color="#2d8cf0" />
        {{ tips }}
      </p>
      <ul class="date-content">
        <li
          v-for="(item, index) in dateOptions"
          :key="index"
          class="flex flex-vertical-center flex-horizontal-between">
          <div>
            <p class="date-title">{{ item.title }}</p>
            <span class="date-desc">{{ item.desc }}</span>
            <div v-if="item.children" class="date-desc">
              <CheckboxGroup v-model="item.checkChild">
                <Checkbox
                  :label="childItem.key"
                  :disabled="!item.checked"
                  v-for="(childItem, childIndex) in item.children"
                  :key="childIndex">
                  {{ childItem.title }}
                </Checkbox>
              </CheckboxGroup>
            </div>
          </div>
          <div @click="changeFun(item)">
            <i-switch size="large" v-model="item.checked"></i-switch>
          </div>
        </li>
      </ul>
      <dt-loading :loading="loading"></dt-loading>
    </dt-modal-edit>
  </div>
</template>
<script>
  import comMgr from '@/biz/sales/salesCommon'
  import dt from '@dt/dt'
  import implementMgr from '@/biz/extension/implement.js'
  export default {
    props: {
      isExtensionFlag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        dateOptions: [],
        dateList: [],
        checkIndex: 5,
        resolveTime: {
          startTime: '',
          endTime: ''
        },
        dateTime: [],
        containDate: [],
        showDateText: '',
        tips: '',
        cusData: [],
        cusVal: [],
        showCusTime: '',
        loading: false
      }
    },
    created() {
      this.getDateList()
    },
    mounted() {},
    methods: {
      getDateList() {
        implementMgr
          .getDateList({})
          .then((res) => {
            this.cusData = res
          })
          .catch((err) => {
            this.cusData = []
            this.$Message.error(err)
          })
      },
      format(labels, selectedData) {
        if (selectedData.length == 3) {
          return selectedData[2].beginDate + ' - ' + selectedData[2].endDate
        } else {
          return labels.join('')
        }
      },
      changeFun(item) {
        if (!item.checked) {
          item.checkChild = []
        } else {
          item.checkChild =
            item.children &&
            item.children.map((itemChild) => {
              return itemChild.key
            })
        }
      },
      initOptions(ParamsDate) {
        this.ParamsDate = ParamsDate
        this.dateOptions = this.ParamsDate.options
        this.dateList = this.ParamsDate.dateList
        this.checkIndex = this.ParamsDate.checkIndex
        this.tips = this.ParamsDate.tips
      },
      setDateFun(checkIndex, resolveTime, containDate) {
        this.checkIndex = checkIndex
        this.containDate = containDate
        this.resolveTime = {
          startTime: resolveTime[0],
          endTime: resolveTime[1]
        }
        if (this.checkIndex == null) {
          this.dateTime = resolveTime
        }
        this.dateOptions.forEach((ele) => {
          ele.checked = containDate.indexOf(ele.key) > -1 ? true : false
        })
        this.showDateText = this.getShowText()
      },
      // 初始化
      initDateFun() {
        this.showDateText = this.getShowText()
        this.checkFun(this.checkIndex)
      },
      editDateFun() {
        if (!this.isExtensionFlag) {
          this.dateOptions.forEach((ele) => {
            ele.checked = this.containDate.indexOf(ele.key) > -1 ? true : false
          })
        } else {
          this.loading = true
          implementMgr
            .getSettingInfo({
              userId: dt.userInfo().userId
            })
            .then((res) => {
              this.dateOptions = res.dateOptions
              this.containDate = res.containDate
              this.loading = false
            })
            .catch((err) => {
              this.$Message.error(err)
              this.loading = false
            })
        }

        this.$refs.dateEdit.show()
      },
      onOk() {
        let falseArr = this.dateOptions.filter((item) => !item.checked)
        if (falseArr.length == this.dateOptions.length) {
          this.$Message.info('请至少选择一个取值条件')
          return false
        }
        this.showDateText = this.getShowText()
        this.$emit('onResolve', this.checkIndex, this.resolveTime, this.containDate, this.dateOptions)
        this.$refs.dateEdit.hide()
      },
      getShowText() {
        let filterArr = this.dateOptions.filter((item) => item.checked)
        this.containDate = []
        return filterArr
          .map((item) => {
            if (item.checked) {
              if (item.checkChild) {
                this.containDate.push(...item.checkChild)
              }
              this.containDate.push(item.key)
              return item.showText
            }
          })
          .join('、')
      },
      checkFun(key) {
        this.checkIndex = key
        this.dateTime = []
        this.cusVal = []
        this.resolveTime = comMgr.resovleTime(this.checkIndex)
        this.$emit('onResolve', this.checkIndex, this.resolveTime, this.containDate)
      },

      visibleChange(flag) {
        if (!flag) {
          this.$emit('onResolve', this.checkIndex, this.resolveTime, this.containDate)
        }
      },

      changeCascader(value, selectedData) {
        this.checkIndex = null
        this.resolveTime = {
          startTime: selectedData[selectedData.length - 1].beginDate + ' 00:00:00',
          endTime: selectedData[selectedData.length - 1].endDate + ' 23:59:59'
        }
      },

      dateChoose(val) {
        if (val[0] == '' || val[1] == '') {
          return false
        }

        val = this.$dt.tool.handleDateRange(val)
        this.checkIndex = null
        this.resolveTime = {
          startTime: val[0],
          endTime: val[1]
        }
        this.$emit('onResolve', this.checkIndex, this.resolveTime, this.containDate)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .other-content {
    padding: 5px 0;
    margin-bottom: 10px;
    border: 1px solid #dadada;

    .date-list {
      li {
        padding: 0 15px;
        color: #333;
        cursor: pointer;
      }

      .selected {
        color: #2d8cf0;
      }
    }

    .check-time {
      width: 100px;
    }

    .date-limit {
      margin-left: 50px;
      padding: 5px 10px;
      background-color: #fefcec;
    }

    .tips {
      padding: 5px 10px;
      background-color: #fefcec;
      font-size: 14px;
    }

    .date-content {
      margin-top: 10px;

      .date-desc {
        color: #999;
        line-height: 40px;
      }
    }
  }
</style>
